JS30 Day 18 筆記

目標

取得播放清單全部時間的加總

step 1 : 獲取全部時間的秒數

用 querySelectorAll 獲取所有的包含 data-time 的 <li> 元素，得到一組 Array-like 的 NodeList 物件，并將 NodeList 轉成 Array

// 使用 Array.from 轉換為 Array
const timeNodes = Array.from(document.querySelectorAll('[data-time]'))

// 使用 spread operator（...） 轉換爲 Array
const timeNodes = [...document.querySelectorAll('[data-time]')]

獲取所有 data-time 中的時間，將其換成秒數并且將所有秒數加總

const seconds = timeNode
  .map(node => node.dataset.time) // 用 dataset.time 拿到 data-time 的值的陣列
  .map(timeCode =>{
    const [mins, secs] = timeCode
      .split(':') // ['5', '43']
      .map(str => parseFloat(str))  // 字串轉成數字
    return (mins * 60) + secs // 把 time 全部變成秒數

    // 如果不想用 parseFloat 將得到的字串換成數字，可以直接用下方
    // return mins * 60 + secs * 1
    })
  .reduce((total, videoSeconds) => total + videoSeconds,0) // reduce 加總所有秒數

step 2 :

將總秒數轉換成時: 分: 秒

從小時開始計算

// 一小時 = 3600 秒
// 一分鐘 = 60 秒
const hours = Math.floor(seconds / 3600) 
const minute = Math.floor(seconds % 3600)/60)
const sec = seconds % 60
console.log(`${hours}: ${minutes}: ${secondsLeft}`)

從秒開始計算

// 一小時 = 3600 秒
// 一分鐘 = 60 秒
let sec = seconds % 60

// let min = Math.floor(seconds / 60)
// let min = ((seconds - sec) / 60) % 60
let min = (seconds - sec) / 60 


// let hour  = (seconds - min * 60 - sec) / 3600
let hour = Math.floor(min / 60)

min %= 60 

console.log(`${hours}: ${minutes}: ${secondsLeft}`)

參考資料：